<template>
  <div class="box">
    <div class="frame">
      <input
        ref="ipt"
        type="text"
        placeholder="搜索歌曲 / 歌手 / 专辑"
        v-model="value"
        @keydown.enter="keydown"
      />
      <div class="search_icon">
        <img class="auto-img" src="../assets/search.png" alt="" />
      </div>
      <svg @click="clear" v-if="value" xmlns="http://www.w3.org/2000/svg" width="14" viewBox="0 0 28 28">
        <g fill-rule="evenodd">
          <path
            fill="#bcbdbd"
            d="M14 0c7.732 0 14 6.268 14 14s-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0z"
          />
          <path
            d="M19 9L9 19M9 9l10 10"
            fill="none"
            stroke="#ebeceb"
            stroke-width="2.5"
            stroke-miterlimit="10"
          />
        </g>
      </svg>
    </div>
    <SearchSuggest
      v-if="active"
      :arr="arr"
      @jump-searchpage="jumpSearchPage"
      :value="debounceVal"
    />
  </div>
</template>

<script>
import SearchSuggest from "@/components/SearchSuggest.vue";
export default {
  components: {
    SearchSuggest,
  },
  data() {
    return {
      value: null,
      arr: [],
      active: false,
      timeout: null,
      debounceVal: null,
    };
  },
  watch: {
    value(n) {
      if (n.trim()) {
        if (this.timeout) {
          window.clearTimeout(this.timeout);
          this.timeout = window.setTimeout(() => {
            this.active = true;
            this.axios
              .get(
                "https://apis.netstart.cn/music/search/suggest?keywords=" +
                  n +
                  "&type=mobile"
              )
              .then((res) => {
                this.arr = res.data.result.allMatch;
              });
            this.debounceVal = n;
          }, 500);
        } else {
          this.timeout = window.setTimeout(() => {
            this.active = true;
            this.axios
              .get(
                "https://apis.netstart.cn/music/search/suggest?keywords=" +
                  n +
                  "&type=mobile"
              )
              .then((res) => {
                this.arr = res.data.result.allMatch;
              });
            this.debounceVal = n;
          }, 500);
        }
      } else {
        this.active = false;
      }
    },
  },
  methods: {
    jumpSearchPage(val) {
      this.$router.push({ path: "searchlist", query: { word: val } });
    },
    keydown() {
      if (this.value.trim()) {
        this.$emit("history", this.value);
        this.$router.push({
          path: "/searchlist",
          query: {
            word: this.value,
          },
        });
      }
    },
    clear(){
      this.value="";
    }
  },
};
</script>

<style lang="less" scoped>
.box {
  .frame {
    position: relative;

    input {
      width: 95vw;
      margin: 7px auto;
      line-height: 30px;
      border-radius: 20px;
      border: 0;
      outline: none;
      background-color: #ebecec;
      padding-left: 33px;
      font-size: 14px;
    }
    .search_icon {
      width: 18px;
      position: absolute;
      top: 15px;
      left: 20px;
    }
  }
  svg{
    position: absolute;
    top:15px;
    right:20px;
  }
}
</style>